<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中兴手机 Axon 30、Axon 30 Ultra、努比亚红魔6、中兴路由器、智能产品、中兴商城ZTEmall.com 官网正品保障_中兴 Axon 30 Ultra
        5G_ZTE中兴官方商城_ZTE中兴ZTEmall.com_中兴手机Axon30 Pro、Axon30 Ultra、努比亚红魔6Pro、中兴路由器、中兴智能家居、官网正品保障</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/details.css">
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2841773_cpy5m91hfcq.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/promise_ajax1.js"></script>
</head>

<body>
    <!-- 顶部导航 -->
    <div id="topbar">
        <div class="wrap-lg w">
            <div class="topbar-left cl">
                <a href="https://www.zte.com.cn/china/" rel="nofollow noopener noreferrer"
                    style="color: #fff; background-color: #008fd5;">中兴官网</a>
                <a href="https://www.ztedevices.com/cn/" rel="nofollow noopener noreferrer" target="_blank">消费者业务</a>
                <a href="http://support.zte.com.cn/support/h5index.aspx?_langType=zh-cn"
                    rel="nofollow noopener noreferrer" target="_blank">运营商业务</a>
                <a href="http://esupport.zte.com.cn" rel="nofollow noopener noreferrer" target="_blank">企业业务</a>
            </div>
            <div class="topbar-right">
                <a href="../html/login-ZTE.html" class="loginBtn">登录</a>
                <a href="../html/register-ZTE.html" class="registerBtn">注册</a>
            </div>
        </div>
    </div>
    <!-- 头部信息栏 -->
    <div id="header">
        <div class="logo">
            <a href="../html/index-ZTE.html">
                <img src="https://image.ztemall.com/bb27a3154a9d096e434aae60cd793d88.png" alt="LOGO">
            </a>
        </div>
        <form action="https://www.ztemall.com/search.html" method="post" id="goods_search">
            <input type="text" name="keyword" id="search-key-word" class="x-input">
            <a href="javascript:;" class="searchBar">搜索
            </a>
        </form>
        <div class="lookGoodsCar">
            <i class="iconfont icon-gouwuche"></i>
            <a href="../html/GoodsCar-ZTE.html" class="icon-cart-a">查看购物车</a>
        </div>
    </div>
    <!-- 页面导航栏 -->
    <div class="nav">
        <div class="wrap-lg w">
            <div class="nav-left">
                <a href="../html/GoodsList-ZTE.html">
                    <div class="goodsType">全部商品分类</div>
                </a>
            </div>
            <div class="nav-main">
                <a href="">Axon30系列旗舰</a>
                <a href="">努比亚专区</a>
                <a href="">红魔专区</a>
                <a href="">智能手表</a>
                <a href="">线下门店</a>
                <a href="">线上服务站</a>
            </div>
        </div>
    </div>
    <!-- 商品导航区 -->
    <div class="main">
        <div class="main-lg w cl">
            <div class="bread-nav">
                <a href="">智能手机</a>
                <span>&gt;</span> <a href="">Axon系列</a>
                <span>&gt;</span> <a href="">Axon 30</a>
                <span>&gt;</span> <a href="">ZTE中兴</a>
                <span>&gt;</span> <span>中兴 Axon 30 Ultra 5G</span>
            </div>
            <!-- 商品详情区 -->
            <div class="goods-details">
                <div class="details-left">
                    <div class="showGoods">
                        <!-- <img class="smallImg"
                            src="http://img14.360buyimg.com/n1/jfs/t1/196147/31/10856/104161/60dbcb60E6ec224bb/d786ee09bf8fd83a.jpg"
                            alt="">
                        <div class="shadow"></div> -->
                    </div>
                    <ul class="showList">
                        <!-- <li class="active"><img
                                src="http://img14.360buyimg.com/n1/jfs/t1/196147/31/10856/104161/60dbcb60E6ec224bb/d786ee09bf8fd83a.jpg"
                                alt=""></li>
                        <li><img src="http://img10.360buyimg.com/n1/s400x400_jfs/t1/194022/20/10996/153505/60dc4c14Ea44f43f3/fa8c882d1fe46f4e.jpg"
                                alt=""></li>
                        <li><img src="http://img12.360buyimg.com/n1/s400x400_jfs/t1/122505/19/15070/68848/5f861494Ebe330db5/24bc162f493ec940.jpg"
                                alt=""></li>
                        <li><img src="http://img13.360buyimg.com/n1/jfs/t1/195036/29/11205/93774/60dd9a51Eab0a46d8/db0ca886f02515e0.jpg"
                                alt=""></li> -->
                    </ul>
                </div>
                <!-- 商品描述和价格 -->
                <div class="details-right">
                    <div class="bigImg">
                        <!-- <img src="http://img14.360buyimg.com/n1/jfs/t1/196147/31/10856/104161/60dbcb60E6ec224bb/d786ee09bf8fd83a.jpg"
                            alt=""> -->
                    </div>
                    <div class="goods-title">
                        <!-- <span>Apple iPhone 12 (A2404) 128GB 黑色 支持移动联通电信5G 双卡双待手机</span> -->
                    </div>
                    <div class="goods-price">
                        <!-- <span>￥2699.00</span>
                        <span>手机购买&nbsp;></span> -->
                    </div>
                    <!-- 规格型号 -->
                    <div class="goods-type">
                        <div class="dt">颜色</div>
                        <div class="choose-item-wrap">
                            <div class="choose-item" data-id="16" title="黑曜">
                                <img
                                    src="https://image.ztemall.com/da4db0eec0678dc3188de6ee15fb398c.jpg?x-oss-process=image/resize,w_220,h_220">
                            </div>
                            <div class="choose-item" data-id="17" title="青莹">
                                <img
                                    src="https://image.ztemall.com/d36f68cb54c58709709553b8684ac98d.png?x-oss-process=image/resize,w_220,h_220">
                            </div>
                        </div>
                        <div class="dt">版本</div>
                        <div class="choose-item-wrap">
                            <div class="choose-item" title="6GB+128GB">
                                6GB+128GB </div>
                            <div class="choose-item" title="8GB+128GB">
                                8GB+128GB </div>
                            <div class="choose-item" title="8GB+256GB">
                                8GB+256GB </div>
                            <div class="choose-item" title="12GB+256GB">
                                12GB+256GB </div>
                        </div>
                        <div class="dt">套餐类型</div>
                        <div class="choose-item-wrap">
                            <div class="choose-item" title="官方标配">
                                官方标配 </div>
                            <div class="choose-item" title="一年延保碎屏套装">
                                一年延保碎屏套装 </div>
                        </div>
                        <div class="goodsAdd">
                            <!-- 商品数量选择 -->
                            <!-- <div class="dt">已选择商品：</div>
                        <span class="dd choose-number">1台</span>
                        <div class="dt">数　　量</div> -->
                            <!-- <div class="buy-number">
                            <a href="javascript:void(0);" class="reduct btn">-</a>
                            <input type="text" value="1" class="buyNumber">
                            <a href="javascript:void(0);" class="add btn">+</a>
                        </div>
                        <a class="buyBtn Btn" href=""><span>立即购买</span></a>
                        <a class="addCar Btn" href=""><span>加入购物车</span></a> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 商品详情细节 -->
    <div class="goodsDetail">
        <div class="goodsDetail-lg  w cl">
        </div>
    </div>
</body>
<script>
    var topbarRight = document.getElementsByClassName("topbar-right")[0];
    // 标识用户身份
    var cookie = document.cookie;
    if (cookie) {
        var user = getCookie("lgc");  //登录的用户名
        if (user) {
            topbarRight.innerHTML = `<span>欢迎您,${user}</span><button onclick="exit()">退出</button>`;
        }
    }


    $(async function () {
        // 如果没gid数据就跳主页
        var url = urlParse();
        var gid = url.gid;
        if (!gid) {
            location.href = "./index-ZTE.html";
        }

        // 调用接口动态生成
        var result = await searchGoodsByGoodsId({ gid });
        var { status, data: { goodsId, goodsName, goodsPrice, goodsImg, smallPicList, bigPicList, goodsDetail } } = result;
        console.log(result);
        if (!status) {
            location.href = "./index-ZTE.html";
        }
        // 左边
        $(".showGoods").html(`<div class="shadow"></div><img class="smallImg"
                            src="${bigPicList[0]}"
                            alt="">
                            `);


        var html = "";
        var len = smallPicList.length >= 6 ? 6 : smallPicList.length; //小图片张数的判断
        for (var i = 0; i < len; i++) {
            html += `<li><img src="${smallPicList[i]}" 
                                alt=""></li>`
        }
        $(".showList").html(html);
        // 右边
        $(".bigImg").html(`<img src="${bigPicList[0]}"
                            alt="">`)
        $(".goods-title").html(`<span>${goodsName}</span>`);
        $(".goods-price").html(`<span>￥${goodsPrice}</span>
                        <span>手机购买&nbsp;></span>`);

        var html = `<div class="dt">已选择商品：</div>
                        <span class="dd choose-number">1台</span>
                        <div class="dt">数　　量</div>
                        <div class="buy-number">
                            <a href="javascript:void(0);" class="reduct btn">-</a>
                            <input type="text" value="1" class="buyNumber">
                            <a href="javascript:void(0);" class="add btn">+</a>
                        </div>
                        <a class="buyBtn Btn" href="javascript:;"><span>立即购买</span></a>
                        <a class="addCar Btn" href="javascript:;"><span>加入购物车</span></a>`;
        $(".goodsAdd").html(html);

        // 商品详情细节
        $(".goodsDetail-lg").html(goodsDetail);


        // 增加
        $(".add").click(function () {
            //通过同级元素获取数量
            var num = $(this).prev().val();
            num++;
            $(this).prev().val(num); //赋值
            $(this).prev().prev().text("-");

            $(".choose-number").text(num + "台");
        })

        //减少
        $(".reduct").click(function () {
            var num = $(this).next().val();
            if (num == 1) return false;
            num--;
            if (num == 1) $(this).text("");
            $(this).next().val(num); //赋值
            $(".choose-number").text(num + "台");
        })



        // 放大镜
        var maxLeft = null;
        var maxTop = null;
        var sacle = null; // 2.5

        $(".showGoods").hover(function () {
            $(".shadow").show();
            $(".bigImg").show();

            maxLeft = $(".showGoods").get(0).clientWidth - $(".shadow").get(0).clientWidth;
            maxTop = $(".showGoods").get(0).clientHeight - $(".shadow").get(0).clientHeight;
            sacle = $(".bigImg img").get(0).clientWidth / $(".smallImg").get(0).clientWidth; // 2.5
            console.log($(".bigImg img").get(0).clientWidth, $(".smallImg").get(0).clientWidth);
        }, function () {
            $(".shadow").hide();
            $(".bigImg").hide();
        })

        $(".showGoods").mousemove(function (e) {
            var x = $(e).get(0).pageX - $(this).offset().left - $(".shadow").get(0).clientWidth / 2;
            var y = $(e).get(0).pageY - $(this).offset().top - $(".shadow").get(0).clientHeight / 2;

            if (x < 0) x = 0;
            if (x > maxLeft) x = maxLeft;
            if (y < 0) y = 0;
            if (y > maxTop) y = maxTop;

            $(".shadow").css("left", x + "px");
            $(".shadow").css("top", y + "px");

            $(".bigImg img").css("left", -sacle * x + "px");
            $(".bigImg img").css("top", -sacle * y + "px");
        })

        var smallImgList = bigPicList;
        var bigImgList = bigPicList;

        $(".showList li").each(function (index, item) {
            $(this).mouseenter(function () {
                $(".showList li").each(function () {
                    $(this).removeClass("active");
                })
                $(this).addClass("active");

                $(".smallImg").prop("src", smallImgList[index]);

                $(".bigImg img").prop("src", bigImgList[index]);
            })
        })


        // 加入购物车
        $(document).on("click", ".addCar", async function () {
            var phone = getCookie("lgc");
            var buyNum = $(".buyNumber").val();
            console.log(phone);
            if (phone) {
                var result = await addToGoodsCar({ phone, gid, buyNum });
                console.log(result);
                var { status, msg } = result;
                if (status) {
                    if (confirm("购买成功,是否进入购物车？")) {
                        location.href = "./GoodsCar-ZTE.html";
                    }
                } else {
                    alert(msg);
                }
            } else {
                // 没用登录就返回登录页
                location.href = "./login-ZTE.html?returnUrl=" + encodeURIComponent(location.href);
            }
        })

    });



    // 数据解析
    function urlParse() {
        var search = location.search;
        var data = {};
        if (search) {
            // console.log(search);
            var str = search.substr(1);
            var list = str.split("&");
            // console.log(list);
            for (var i = 0; i < list.length; i++) {
                var item = list[i];
                var key = item.split("=")[0];
                var val = item.split("=")[1];
                data[key] = val;
            }
            // console.log(data);
        }
        return data;
    }

    function exit() {
        delCookie("lgc");
        location.reload();
    }
</script>

</html>